<template>
  <view class="home">
    <wd-navbar :safeAreaInsetTop="true" :bordered="false" fixed placeholder>
      <template #title class="search-box">
        <view class="search-box">
          <wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>
        </view>
      </template>
    </wd-navbar>
    <view class="content">
      <view class="home-avatar">
        <view class="avatar-left">
          <view class="title-fisher">你好，我的朋友</view>
          <view class="title-friend">欢迎来到我的商场</view>
        </view>
        <view class="avatar-right">
          <image src="@/static/prod/prod1.png" class="avatar-img"></image>
        </view>
      </view>
      <view class="home-content">
        <view class="prod-box" v-for="i in 3" :key="i">
          <image src="@/static/prod/prod1.png" class="prod-image" />
          <view class="prod-manger">
            <view class="prod-index">
              <view class="prod-title">敬修堂防脱滋养育发洗发露</view>
              <view class="prod-text">控油防脱两不误 细腻丰富泡沫</view>
              <view class="prod-cart">
                <view class="prod-price">￥200</view>
                <view class="prod-buy" @click="onBuy">立即购买</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  const onBuy = () => {
    uni.navigateTo({ url: '/pages/product-details/index' })
  }
</script>
<style lang="scss">
  ::v-deep(.wd-navbar) {
    background-color: #eef0e6 !important;
  }
  .search-box {
    display: flex;
    height: 100%;
    background-color: #eef0e6 !important;
    align-items: center;
    margin-right: 60rpx;
    --wot-search-padding: 0;
    --wot-search-side-padding: 0;
    ::v-deep(.wd-search) {
      background-color: #eef0e6 !important;
    }
  }
  .content {
    height: 100%;
    background-color: #eef0e6;
    .home-avatar {
      display: flex;
      height: 150rpx;
      padding: 0 20rpx;
      .avatar-left {
        flex: 3;
        display: flex;
        flex-direction: column;
        margin-right: 10rpx;
        padding: 0 30rpx;
        .title-fisher {
          flex: 1;
          display: flex;
          color: #000;
          font-size: 24px;
          font-style: italic;
          align-items: center;
        }
        .title-friend {
          display: flex;
          flex: 1;
          font-size: 18px;
          align-items: center;
          color: #ccc;
        }
      }

      .avatar-right {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .avatar-img {
          height: 100rpx;
          width: 100rpx;
          border-radius: 50%;
        }
      }
    }
    .home-content {
      height: 100%;
      .prod-box {
        margin-top: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        .prod-image {
          height: 480px;
        }
        .prod-manger {
          display: flex;
          flex-direction: column;
          bottom: 0;
          left: 0;
          width: 320px;
          margin-top: -60px;
          // height: 116px;
          border-radius: 25px;
          background: rgba(29, 36, 30, 1);
          .prod-index {
            margin: 10rpx 30rpx;
            .prod-title {
              display: flex;
              align-items: center;
              height: 50rpx;
              color: #fff;
            }
            .prod-text {
              display: flex;
              align-items: center;
              height: 40rpx;
              font-size: 13px;
              color: rgba(255, 255, 255, 0.6);
            }
            .prod-cart {
              margin: 20rpx 0;
              display: flex;
              flex: 1;
              justify-content: space-between;
              align-items: center;
              padding: 0 20rpx;
              .prod-price {
                color: rgb(255, 255, 255);
                font-size: 36rpx;
              }

              .prod-buy {
                display: flex;
                background: rgba(9, 171, 79, 1);
                color: #fff;
                height: 40rpx;
                font-size: 32rpx;
                padding: 10rpx 25rpx;
                border-radius: 20rpx;
              }
            }
          }
        }
      }
    }
  }
</style>
